<div class="page-breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">CMS管理</a>
        </li>
        <li class="active">网站栏目</li>
    </ul>
</div>
<!-- Page Body -->
<div class="page-body">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="widget">
                <div class="widget-header bordered-bottom bordered-themeprimary">
                    <i class="widget-icon fa fa-tasks themeprimary"></i>
                    <span class="widget-caption themeprimary">选择站点</span>
                </div>
                <div class="widget-body bordered-left">
                    <div class="form-inline" role="form">
                        <div class="form-group">
                            <select class="form-control" id="websites">
                                <option value="">选择选择站点</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-default" id="search">检索</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-sm-12 col-xs-12">
            <div class="widget">
                <div class="widget-header bordered-bottom bordered-themeprimary">
                    <i class="widget-icon fa fa-tasks themeprimary"></i>
                    <span class="widget-caption themeprimary">网站栏目结构</span>
                </div>
                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <ul id="colTree" class="row ztree"></ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-9 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-lg-12">
                    <div class="widget">
                        <div class="widget-header bordered-bottom bordered-themeprimary">
                            <i class="widget-icon fa fa-tasks themeprimary"></i>
                            <span class="widget-caption themeprimary">网站栏目列表</span>
                            <a id="editabledatatable_new" href="#!cms/col/col-add.html" class="btn btn-sm themeprimary pull-right">新建网站栏目</a>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <table id="dt_basic" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th data-hide="phone">编号ID</th>
                                        <th data-hide="phone">栏目名称</th>
                                        <th data-class="expand">是否可用</th>
                                        <th data-hide="phone">是否单页</th>
                                        <th data-hide="phone">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="application/javascript">
    var oTable;
    var selectTreeNode = null;
    var websitesValue = null;
    var setting = {
        async: {
            enable: true,
            url:"rest/v1/cms/col/"+websitesValue+"/childs",
            autoParam:["id=parenId"],
            dataType: "json",
            type: "get",
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    function beforeClick(treeId, treeNode) {
        selectTreeNode = treeNode;
        if(selectTreeNode.isParent){
            websitesValue = $('#websites option:selected').val();
            setting.async.url="rest/v1/cms/col/"+websitesValue+"/childs";
            oTable.fnReloadAjax();
        }
    }

    $(function(){
        $.ajax({
            type: "GET",
            url: "rest/v1/cms/bi/1/100",
            cache: false,
            dataType: "json",
            success: function (content) {
                var result = content.result;
                if(null != content.result){
                    var items = result.content;
                    $.each(items,function(index,item){
                        $("#websites").append("<option value='"+item.id+"'>"+item.websiteName+"</option>");
                    });
                }
            }
        });

        $('#websites').change(function(){
            refresh();
        });

        oTable = $('#dt_basic').dataTable({
            serverSide: true,
            orderMulti: false,
            sDom: "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
            "oTableTools": {
                "aButtons": []
            },
            "language": {
                "search": "",
                'emptyTable': '没有数据',
                'loadingRecords': '加载中...',
                'processing': '查询中...',
                'sLengthMenu': '每页 _MENU_ 件',
                'zeroRecords': '没有数据',
                "oPaginate": {
                    "sPrevious": "上一页",
                    "sNext": "下一页"
                },
                //'info': '当前显示 _START_ 到 _END_ 条记录,共 _TOTAL_ 条记录,共 _PAGES_页,当前第_PAGE_ 页',
                'info': '当前显示 _START_ 到 _END_ 条记录,共 _TOTAL_ 条记录',
                'infoEmpty': '没有数据',
                'infoFiltered': '(过滤总件数 _MAX_ 条)'
            },
            bProcessing: true,
            columns: [
                { "data": "id" , "bSortable": false, "aTargets": [0]},
                {"data": "id"},
                { "data": "name" },
                { "data": "enable",
                    "render":function(data, type, full, meta){
                        if(data){
                            return '<span style="color: green;">是</span>';
                        }else{
                            return '<span style="color: red;">否</span>';
                        }
                    }
                },
                { "data": "singlePage",
                    "render":function(data, type, full, meta){
                        if(data){
                            return '<span style="color: green;">是</span>';
                        }else{
                            return '<span style="color: red;">否</span>';
                        }
                    }
                },
                { "data": "id" , "bSortable": false ,
                    "render":function(data, type, row, meta){
                        var str = null;
                        if(row.enable){
                            str = '关闭可用状态';
                        }else{
                            str = '开启可用状态';
                        }
                        var tmp =
                                '<a href="#!cms/col/col-update.html?target='+window.btoa(data)+'" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> 修改</a> '
                                +'<a href="javascript:delData(&quot;'+window.btoa(data)+'&quot;);" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>'

                                +'<div class="btn-group" style="margin-left: 5px;">                                                '
                                +'	<a class="btn btn-xs btn-maroon dropdown-toggle" data-toggle="dropdown">   '
                                +'		更多 <i class="fa fa-angle-down"></i>                          '
                                +'	</a>                                                                 '
                                +'	<ul class="dropdown-menu">                                           '
                                +'		<li>                                                             '
                                +'			<a href="javascript:modifyPwdDialog(&quot;'+window.btoa(data)+'&quot;);">'+str+'</a>                     '
                                +'		</li>                                                            '
                                +'		<li>                                                             '
                                +'			<a href="javascript:modifyHptDialog(&quot;'+window.btoa(data)+'&quot;);">访问方式</a>             '
                                +'		</li>                                                            '
                                +'	</ul>                                                                '
                                +'</div>';
                        return tmp;
                    }
                }
            ],
            aaSorting: [],
            ajax: function (data, callback, settings) {
                var param = {};
                param.limit = data.length;
                param.start = data.start;
                param.page = (data.start / data.length) + 1;
                param.name=data.search['value'];
                param.weibsite = websitesValue;
                param.parenId=(null != selectTreeNode)?selectTreeNode.id:"0";
                $.ajax({
                    type: "GET",
                    url: "rest/v1/cms/col/"+param.page+"/"+param.limit,
                    cache: false,
                    data: param,
                    dataType: "json",
                    success: function (content) {
                        var result = content.result;
                        if(null != content.result){
                            var returnData = {};
                            returnData.draw=result.content;
                            returnData.recordsTotal = result.totalSize;
                            returnData.recordsFiltered = result.totalSize;
                            returnData.data = result.content;
                            callback(returnData);
                        }
                    }
                });
            },
            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                return $('td:eq(0)', nRow).html('<i class="fa fa-plus-square-o row-details"></i>');
            }
        });

        $('#dt_basic').on('click', ' tbody td .row-details', function () {
            var nTr = $(this).parents('tr')[0];
            if (oTable.fnIsOpen(nTr)) {
                $(this).addClass("fa-plus-square-o").removeClass("fa-minus-square-o");
                oTable.fnClose(nTr);
            }else {
                $(this).addClass("fa-minus-square-o").removeClass("fa-plus-square-o");;
                oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
            }
        });

        $('.dsearch').on('keyup click', function () {
            var tsval = $(".dsearch").val()
            $('#dt_basic').search(tsval, false, false).draw();
        });

        $('#search').click(function(){
            if(null != websitesValue){
                refresh();
            }else{
                Notify('请选择站点', 'top-right', '800', 'warning', 'fa-bolt', true);
            }
        });

        $('#editabledatatable_new').click(function(){
                if(null == websitesValue || websitesValue.length == 0){
                    Notify('请选择站点', 'top-right', '800', 'warning', 'fa-bolt', true);
                    return false;
                }
                $(this).attr("href",$(this).attr("href")+"?weibsite="+window.btoa(websitesValue));
        });
    });

    function fnFormatDetails(oTable, nTr) {
        var aData = oTable.fnGetData(nTr);
        var sOut = '<table style="margin:0px;padding:0px;">';
        sOut +='		<tr><td>编号ID:</td><td>'+aData.id+'</td></tr> ';
        sOut +='		<tr><td>访问地址:</td><td>'+aData.url+'</td></tr> ';
        sOut +='		<tr><td>上级菜单:</td><td>'+aData.parentName+'</td></tr> ';
        sOut +='		<tr><td>创建日期:</td><td>'+TimeUtil.yyyyMMddHHmmss(aData.createTime)+'</td></tr> ';
        sOut +='</table> ';
        return sOut;
    }

    function delData(id){
        layer.confirm('你真的要删除该数据吗?', {
            btn: ['删除','取消']
        }, function(index, layero){
            $.ajax({
                type:"DELETE",
                headers: {
                    "Content-Type": "application/json",
                    "X-HTTP-Method-Override": "DELETE"
                }, //PUT,DELETE
                url:"rest/v1/cms/col/"+window.atob(id),
                success:function(response){
                    layer.close(index);
                    Notify(response.message, 'top-right', '800', 'success', 'fa-bolt', true);
                    oTable.fnReloadAjax();
                },
                error: function(error) {
                    var obj = jQuery.parseJSON(error.responseText);
                    Notify(obj.message, 'top-right', '800', 'warning', 'fa-bolt', true);
                }
            });
        });
    }

    function refresh(){
        websitesValue = $('#websites option:selected').val();
        setting.async.url="rest/v1/cms/col/"+websitesValue+"/childs";
        $.fn.zTree.init($("#colTree"), setting);
        try{
            if(selectTreeNode.isParent){
                oTable.fnReloadAjax();
            }
        }catch(e){
            oTable.fnReloadAjax();
        }
    }

</script>